<!doctype html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Amaze UI Admin index Examples</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="__PUBLIC__/assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="__PUBLIC__/assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="__PUBLIC__/assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="__PUBLIC__/assets/css/admin.css">
    <link rel="stylesheet" href="__PUBLIC__/assets/css/app.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/uploadify/uploadify.css"/>
    <link rel="stylesheet" href="__PUBLIC__/dist/amazeui.upload.css"/>
</head>

<body data-type="generalComponents">


<include file="./Public/common/htm/header.html"/>

<div class="tpl-page-container tpl-page-header-fixed" id="image_add">
    <include file="./Public/common/htm/menu.html"/>

    <div class="tpl-content-wrapper">
        <div class="tpl-content-page-title">
            文字回复列表
        </div>
        <ol class="am-breadcrumb">
            <li>
                <a href="#" class="am-icon-home">首页</a>
            </li>
            <li>
                <a href="#">微信</a>
            </li>
            <li class="am-active">文字回复设置</li>
        </ol>
        <div class="tpl-portlet-components">

            <div class="portlet-title">
                <div class="caption font-green bold">
                    <span class="am-icon-code"></span> 明细
                </div>
            </div>

            <div class="tpl-block">
                <div class="am-g">
                    <div class="tpl-form-body tpl-form-line">
                        <form class="am-form tpl-form-line-form" data-am-validator id="basic_info_form">
                            <div class="am-form-group">
                                <label for="user-name" class="am-u-sm-2 am-form-label">规则名称<span
                                        class="tpl-form-line-small-title" style="color:red">必填</span></label>
                                <div class="am-u-sm-10">
                                    <input type="text" class="tpl-form-input" id="rule_name" name="rule_name"
                                           placeholder="请输入规则名称" required>
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label for="user-name" class="am-u-sm-2 am-form-label">关键字<span
                                        class="tpl-form-line-small-title" style="color:red">必填</span></label>
                                <div class="am-u-sm-10">
                                    <input type="text" class="tpl-form-input" id="user-name" name="rule_keywords"
                                           placeholder="请输入关键字,多个关键字使用','隔开">
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label for="user-name" class="am-u-sm-2 am-form-label">图片<span
                                        class="tpl-form-line-small-title" style="color:red">必填</span></label>
                                <img id="upload_img" name="upload_img" src="__PUBLIC__/assets/img/upload.png"
                                     style="padding-left: 1.5rem;padding-right: 1.5rem; max-height: 700px;max-width: 700px;"
                                     @click="select_images" :wx_mid=wx_mid
                                >
                                <input id="wx_mid" name="wx_mid" :value=wx_mid hidden>
                                <input id="url" name="url" :value=url hidden>
                                <input id="rid" name="rid" :value=rid hidden>
                            </div>

                            <div class="am-form-group">
                                <label for="user-intro" class="am-u-sm-2 am-form-label">备注</label>
                                <div class="am-u-sm-10">
                                        <textarea class="" rows="10" id="content" name="content"
                                                  placeholder="请输入备注内容"></textarea>
                                </div>
                            </div>

                            <div class="am-form-group">
                                <div class="am-u-sm-10 am-u-sm-push-3">
                                    <button type="button" @click="submit"
                                            class="am-btn am-btn-primary tpl-btn-bg-color-success ">提交
                                    </button>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>

            </div>

        </div>

        <div class="am-modal am-modal-no-btn" tabindex="-1" id="select_img">

            <div data-am-widget="tabs" class="am-tabs am-tabs-d2 am-modal-dialog">
                <ul class="am-tabs-nav am-cf">
                    <li class="am-active">
                        <a href="[data-tab-panel-0]">永久素材</a>
                    </li>
                    <li class="">
                        <a href="[data-tab-panel-1]">临时素材</a>
                    </li>
                    <li class="">
                        <a href="[data-tab-panel-2]">历史</a>
                    </li>
                </ul>
                <div class="am-tabs-bd">
                    <div data-tab-panel-0 class="am-tab-panel am-active">
                        <div id="upload_perpetual"></div>
                    </div>
                    <div data-tab-panel-1 class="am-tab-panel ">
                        <img src="__PUBLIC__/assets/img/upload.png"
                             style="display: block;margin-top: 10px;margin-right: auto;margin-bottom: 10px;margin-left: auto;"/>
                    </div>
                    <div data-tab-panel-2 class="am-tab-panel ">
                        【歌唱】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。
                    </div>
                </div>
            </div>
        </div>

        <div class="tpl-alert"></div>
        <include file="./Public/common/htm/pop_win.html"/>

    </div>
</div>

</body>


<script src="__PUBLIC__/assets/js/jquery.min.js"></script>
<script src="__PUBLIC__/assets/js/amazeui.min.js"></script>
<script src="__PUBLIC__/assets/js/app.js"></script>
<script src="__PUBLIC__/vue.js"></script>
<script src="__PUBLIC__/uploadify/jquery.uploadify.min.js"></script>
<script src="__PUBLIC__/dist/amazeui.upload.js"></script>
<script src="__PUBLIC__/dist/amazeui.upload.template.js"></script>
<script src="__PUBLIC__/dist/amazeui.upload.event.js"></script>
<script>
    var vm = new Vue({
        el: '#image_add',
        data: {
            wx_mid: -1,
            url: '',
            rid: '',
        },
        methods: {
            load_rule_data: function (rid) {
                $.ajax({
                    type: 'post',
                    url: '../ImageReplyApi/get_image_reply_rule',
                    dataType: 'json',
                    data: {
                        rid: rid,
                    },
                    success: function (data) {
                        if (data.stateCode == 200) {
                            document.getElementsByName('rule_name')[0].value = data.data.rule_name;
                            document.getElementsByName('rule_keywords')[0].value = data.data.rule_keywords;
                            document.getElementsByName('content')[0].value = data.data.description;
                            document.getElementsByName('upload_img')[0].src = '../../' + data.data.url;
                            vm.url = data.data.url;
                            vm.rid = rid;
                        }
                    },
                    error: function (data) {
                    }
                })
            },
            select_images: function () {
                $('#select_img').modal({});
                $(function () {
                    $('#upload_perpetual').AmazeuiUpload({
                        url: '../../Upload/Upload/uploadImageFile',
                        callback: function (data) {
                            vm.upload_perpetual(data);
                        }
                    })
                    ;
                });
            },
            upload_perpetual: function (data) {
                data = eval("(" + data + ')');
                if (data.stateCode == 200) {
                    vm.wx_mid = data.data.a_id;
                    vm.url = data.data.url;
                    $('#upload_img').attr('src', '../../' + data.data.url);
                    $('#select_img').modal('close');
                }
            },
            submit: function (data) {
                $.ajax({
                    type: 'post',
                    url: '../ImageReplyApi/add_img_rule',
                    dataType: 'json',
                    data: $('#basic_info_form').serialize(),
                    success: function (data) {
                        $("#pop_win").find("#tip_index").html('操作提示');
                        $("#pop_win").find("#tip_content").html(data.message);
                        if (data.stateCode == 200) {
                            $("#pop_win #popWinBtn").one('click', function () {
                                window.location = "./images_index";
                            });
                        }
                        $("#pop_win").modal();
                    },
                    error: function (data) {
                        console.log('error');
                    }
                })
            },
            keywordsValidate: function (keywords) {
                var result = '';
                $.ajax({
                    type: 'post',
                    url: '../../Validation/Validation/replyKeyWords',
                    dataType: 'json',
                    async: false,
                    data: {'rule_keywords': keywords},
                    success: function (data) {
                        if (data.stateCode == 200) {
                            result = data.message;
                        } else {
                            result = data.message;
                        }
                    },
                    error: function (data) {
                        console.log('error');
                    }
                })

                return result;
            },
            get_rid: function () {
                var url = location.search; //获取url中"?"符后的字串
                var theRequest = new Object();
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    strs = str.split("&");
                    for (var i = 0; i < strs.length; i++) {
                        theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                    }
                }
                return theRequest;
            }
        }
    });
    $(document).ready(function () {
        var request = vm.get_rid(1);
        var rid = request['rid'];
        if (rid == null || rid == '') {
            return;
        }
        vm.load_rule_data(rid);
    });


</script>


</html>